<template>
  <el-dialog
    :model-value="visible"
    @update:model-value="$emit('update:visible', $event)"
    title="提前还款"
    width="700px"
  >
    <div class="early-repayment-content">
      <!-- 占位内容 -->
      <div class="placeholder-content">
        <el-icon class="placeholder-icon"><Timer /></el-icon>
        <h3>提前还款功能</h3>
        <p>提前还款功能正在开发中，敬请期待！</p>
        <p>您可以通过客服热线咨询提前还款相关事宜。</p>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="$emit('update:visible', false)">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { Timer } from '@element-plus/icons-vue';

defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  loan: {
    type: Object,
    default: null
  }
});

defineEmits(['update:visible', 'confirm']);
</script>

<style scoped>
.early-repayment-content {
  padding: 20px;
}

.placeholder-content {
  text-align: center;
  padding: 40px 20px;
  color: #909399;
}

.placeholder-icon {
  font-size: 64px;
  margin-bottom: 20px;
  color: #e6a23c;
}

.placeholder-content h3 {
  margin: 0 0 16px 0;
  color: #303133;
  font-size: 20px;
}

.placeholder-content p {
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.6;
}

.dialog-footer {
  text-align: right;
}
</style>
